<template>
	<view class="conter">
		<view class="tab flex flex-row items-center justify-between">
			<view class="tab-item " :class="active==index?'active':''" v-for="(item,index) in tablist" :key="index"
				@click="tabtop(index)">
				{{item.name}}
			</view>
		</view>
		<template v-if="active==0">
			<view class="pt ptone flex flex-col ">

				<view class="item w100 flex flex-row justify-between items-center">
					<text class="c_52 f_28">抽奖名称</text>
					<view class="flex flex-row mr5">
						<input class="input f_28 c_52" type="text" value="" v-model="new_detail.title"
							placeholder="请输入抽奖名称" placeholder-class="f_28 c_ae" />
					</view>
				</view>
				<view class="item w100 flex flex-row justify-between items-center">
					<text class="c_52 f_28">最多参与</text>
					<view class="flex flex-row mr5 items-center">
						<input class="input f_28 c_52" type="number" value="" v-model="new_detail.maxPeople"
							placeholder="请输入最多参与多少" placeholder-class="f_28 c_ae" /><text
							class="ml10 f_28 c_52">人</text>
					</view>

				</view>

				<view class="item w100 flex flex-row justify-between items-center">
					<text class="c_52 f_28">最少参与</text>
					<view class="flex flex-row mr5 items-center ">
						<input class="input f_28 c_52" type="number" value="" placeholder-class="f_28 c_ae"
							v-model="new_detail.minPeople" placeholder="请输入最少参与多少" />
						<text class="ml10 f_28 c_52">人</text>
					</view>

				</view>
				<view class="item w100 flex flex-row justify-between items-center" @click="sele()">
					<text class="c_52 f_28">开奖时间</text>
					<view class="flex flex-row mr5 items-center"><text class="f_28"
							:class="new_detail.openTime?'c_52':'c_ae'">{{new_detail.openTime?new_detail.openTime:'请选择时间'}}</text>
						<image src="@/static/arrow_right.png" mode="widthFix" class="arrow"></image>
					</view>

				</view>


				<view class="item w100 flex flex-row justify-between items-center">
					<text class="c_52 f_28">开奖时长</text>
					<view class="flex flex-row mr5">
						<picker @change="confirmscnew" :value="new_detail.openMinutes" :range="columns">
							<view class="flex flex-row f_28 items-center">
								<input disabled="true" class="input f_28 c_52" placeholder-class="f_28 c_ae" type="text"
									value="" v-model="new_detail.openMinutes" placeholder="请选择开奖时长" />
								<text class="ml10 f_28 c_52">分钟</text>
							</view>


						</picker>
					</view>

				</view>


				<!-- <view class="item w100 flex flex-row justify-between items-center">
					<text>抽奖次数</text>
					<view class="flex flex-row mr5">
						<input class="input" type="text" value="" v-model="prize.lucknum" placeholder="请输入抽奖次数" />

					</view>

				</view> -->
				<view class="item w100 flex flex-row justify-between items-center">
					<text class="c_52 f_28">自动开奖</text>
					<view class="flex flex-row mr5">
						<switch class='switchBox' @change="switchChange" color="#DF4B43" :checked="new_detail.autoOpen" />
					</view>

				</view>
				<view class="item w100 flex flex-row justify-between items-center">

					<view class="flex flex-row w100">
						<textarea value="" placeholder="请输入抽奖说明" v-model="new_detail.description" />
					</view>

				</view>

			</view>
			<view class="pt  flex flex-col mt_20" v-for="(item,index) in new_detail.prizes" :key="index">
				<view class="set">
					<view class="del" v-if="index!=0" @click="del(index)">
						<image src="@/static/mine/del.svg" mode="widthFix" style="width: 30rpx;"></image>
					</view>

					<view class="item w100 flex flex-row justify-between items-center">
						<text class="c_52 f_28">奖品名称</text>
						<view class="flex flex-row mr5">
							<input class="input f_28 c_52" placeholder-class="f_28 c_ae" type="text" value=""
								v-model="item.title" placeholder="请输入奖品名称" />
						</view>

					</view>
					<view class="item w100 flex flex-row justify-between items-center">
						<text class="c_52 f_28" style="width: 200rpx;">奖品类型</text>
						<view class="flex flex-row justify-end" style="width: 100%;">
							<picker @change="bindPickerChange($event,index)" :value="0" :range="range" range-key="text">
								<view class="flex flex-row f_28" :class="item.prizeType?'c_52':'c_ae'">

									{{item.prizeType!=''?getprizeType(item.prizeType):'选择奖品类型'}}
									<image src="@/static/arrow_right.png" mode="widthFix" class="arrow"></image>
								</view>


							</picker>

							<!-- <text
								:class="item.prizetype?'c_3':'c_9'">{{item.prizetype!=''?item.prizetype:'选择奖品类型'}}</text> -->

						</view>
						<view class="uni-list-cell-db">

						</view>
					</view>

					<view class="item w100 flex flex-row justify-between items-center" v-if="item.prizeType==2">
						<text class="c_52 f_28" style="width: 200rpx;">优惠券类型</text>
						<view class="flex flex-row justify-end" style="width: 100%;">
							<picker @change="bindPickerChange1($event,index)" :value="0" :range="rangecounp"
								range-key="name">
								<view class="flex flex-row f_28" :class="item.relateId?'c_52':'c_ae'">
									{{item.relateId!=''?getcouptype(item.relateId):'选择优惠券类型'}}
									<image src="@/static/arrow_right.png" mode="widthFix" class="arrow"></image>
								</view>


							</picker>

							<!-- <text
								:class="item.prizetype?'c_3':'c_9'">{{item.prizetype!=''?item.prizetype:'选择奖品类型'}}</text> -->

						</view>
						<view class="uni-list-cell-db">

						</view>
					</view>
					<view class="item w100 flex flex-row justify-between items-center" v-else-if="item.prizeType==4">
						<text class="c_52 f_28" style="width: 200rpx;">红包金额</text>
						<view class="flex flex-row justify-end" style="width: 100%;">
							<view class="flex flex-row mr5">
								<input class="input f_28 c_52" placeholder-class="f_28 c_ae" type="text" value=""
									v-model="item.money" placeholder="请输入红包金额" />
							</view>

							<!-- <text
								:class="item.prizetype?'c_3':'c_9'">{{item.prizetype!=''?item.prizetype:'选择奖品类型'}}</text> -->

						</view>
						<view class="uni-list-cell-db">

						</view>
					</view>

					<view class="item w100 flex flex-row justify-between items-center">
						<text class="c_52 f_28">奖品数量</text>
						<view class="flex flex-row mr5">
							<input class="input f_28 c_52" placeholder-class="f_28 c_ae" type="number" value=""
								v-model="item.count" placeholder="请输入数量" />
						</view>

					</view>



					<view class="item w100 flex flex-row justify-between items-center">
						<text class="c_52 f_28">兑奖方式</text>
						<view class="flex flex-row mr5">

							<picker @change="bindPickerChangefs($event,index)" :value="0" :range="rangereceive"
								range-key="text">
								<view class="flex flex-row f_28 items-center" :class="item.receiveType?'c_52':'c_ae'">
									{{item.receiveType!=''?getreceiveType(item.receiveType):'选择兑奖方式'}}
									<image src="@/static/arrow_right.png" mode="widthFix" class="arrow"></image>
								</view>


							</picker>


						</view>

					</view>

					<view class="item w100 flex flex-row justify-between items-center" @click="showendtime(index)">
						<text class="c_52 f_28">兑奖截止时间</text>
						<view class="flex flex-row mr5 f_28 items-center"><text
								:class="item.endTime?'c_52':'c_ae'">{{item.endTime?item.endTime:'请选择时间'}}</text>
							<image src="@/static/arrow_right.png" mode="widthFix" class="arrow"></image>
						</view>
					</view>

					<mx-date-picker color="#DF4B43" :show="item.show" :type="type" :show-seconds="true"
						:value="item.endTime" @confirm="confirmnew($event,index)" @cancel="closeendtime(index)" />


				</view>

			</view>
			<view class="but mt_20" @click="addluck" v-if="new_detail.prizes.length&&new_detail.prizes.length<8">
				<view class="addbtn flex flex-row justify-center items-center">
					<image src="@/static/index/add.svg" mode="widthFix" style="width: 40rpx;" class="mr10"></image>
					<text>增加奖项</text>
				</view>

			</view>

		</template>


		<template v-else>
			<view class="pt ptone flex flex-col">

				<view class="item w100 flex flex-row justify-between items-center">
					<text class="c_52 f_28">抽奖名称</text>
					<view class="flex flex-row mr5">
						<input class="input f_28 c_52" placeholder-class="f_28 c_ae" type="text" value=""
							v-model="new_detail.title" placeholder="请输入奖品名称" />
					</view>

				</view>
				<view class="item w100 flex flex-row justify-between items-center">
					<text class="c_52 f_28">最多参与</text>
					<view class="flex flex-row mr5">
						<input class="input f_28 c_52" placeholder-class="f_28 c_ae" type="text" value=""
							v-model="new_detail.maxPeople" placeholder="请输入最多参与多少" /><text class="ml10">人</text>
					</view>

				</view>

				<view class="item w100 flex flex-row justify-between items-center">
					<text class="c_52 f_28">最少参与</text>
					<view class="flex flex-row mr5 items-center">
						<input class="input f_28 c_52" placeholder-class="f_28 c_ae" type="text" value=""
							v-model="new_detail.minPeople" placeholder="请输入最少参与多少" />
						<text class="ml10">人</text>
					</view>

				</view>
				<view class="item w100 flex flex-row justify-between items-center" @click="sele()">
					<text class="c_52 f_28">开奖时间</text>
					<view class="flex flex-row mr5 items-center"><text class="f_28"
							:class="new_detail.openTime?'c_52':'c_ae'">{{new_detail.openTime?new_detail.openTime:'请选择时间'}}</text>

						<image src="@/static/arrow_right.png" mode="widthFix" class="arrow"></image>
					</view>

				</view>


				<view class="item w100 flex flex-row justify-between items-center">
					<text class="c_52 f_28">开奖时长</text>
					<view class="flex flex-row mr5">
						<picker @change="confirmscnew" :value="new_detail.openMinutes" :range="columns">
							<view class="flex flex-row f_28 items-center ">
								<input disabled="true" class="input f_28 c_52" placeholder-class="f_28 c_ae" type="text"
									value="" v-model="new_detail.openMinutes" placeholder="请选择开奖时长" />
								<text class="ml10 f_28 c_52">分钟</text>
							</view>


						</picker>
					</view>

				</view>
				<view class="item w100 flex flex-row justify-between items-center">
					<text class="c_52 f_28">红包金额</text>
					<view class="flex flex-row mr5">
						<input class="input f_28 c_52" placeholder-class="f_28 c_ae" type="digit" value=""
							v-model="new_detail.money" placeholder="请输入金额" />
					</view>

				</view>
		<view class="item w100 flex flex-row justify-between items-center">
					<text class="c_52 f_28">自动开奖</text>
					<view class="flex flex-row mr5">
						<switch class='switchBox' @change="switchChange" color="#DF4B43" :checked="new_detail.autoOpen" />
					</view>

				</view>
				<view class="item w100 flex flex-row justify-between items-center">

					<view class="flex flex-row w100">
						<textarea value="" placeholder="请输入抽奖说明" v-model="new_detail.description" />
					</view>

				</view>





			</view>

		</template>

		<view class="fixedbtn flex flex-row justify-between  u-fixed-bottom">

			<view class="btn background_red" :class="{'mb_20': !isIPhoneX}" @click="sub_draw">
				确定修改</view>


		</view>

		<!-- <view class="fixedbtn flex flex-row justify-between  u-fixed-bottom">
		
			<view class="btn background_red" :class="{'mb_20': !isIPhoneX}"    @click="sub_draw2">
				提交2</view>
		
		
		</view> -->

		<mx-date-picker color="#DF4B43" :show="showPicker" :show-seconds="true" :type="type" :value="value"
			@confirm="ed" @cancel="ed" />
	</view>
</template>

<script>
	import {
		Debounce
	} from '@/utils/validate.js'
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	import {
		creatDraw,
		couponlist,
		drawInfoStore,
		drawUpdate
	} from '@/api/activity.js';
	export default {
		components: {
			MxDatePicker
		},
		data() {
			return {
				new_detail: {},
				id: '',
				isIPhoneX: this.isIPhoneX,
				showPicker: false,
				date: '2019/01/01',
				time: '15:00:12',
				datetime: '2019/01/01 15:00:12',
				range: ['2019/01/01', '2019/01/06'],
				rangetime: ['2019/01/08 14:00', '2019/01/16 13:59'],
				type: 'rangetime',
				value: '',
				prizecounpType: '',
				rangecounp: [],
				prizecounpTypeLabel: '',
				showsc: false,
				columns: [
					'5分钟', '10分钟', '15分钟'
				],
				prize: {
					name: '',
					maxpeople: '',
					minpeople: '',
					starttime: '',
					time: '',
					lucknum: '',
					remark: ''


				},
				show: false,
				value1: Number(new Date()),
				starttime: '',
				fileList1: [],


				active: 0,
				tablist: [{
					id: 1,
					name: '普通抽奖'
				}, {
					id: 2,
					name: '红包抽奖'
				}],
				hb: {
					name: '',
					money: '',
					num: '',
					people: ''
				},
				addpoint: {
					title: '',
					prizeType: 3,
					prizeTypeLabel: '积分',
				},
				additem: {
					title: '',
					goods: '',
					count: Number,
					chance: '',
					type: '',
					prizeType: '',
					prizeTypeLabel: '',
					money: '',
					matchType: 0,
					prizecounpTypeLabel: '',
					relateId: '',
					endTime: '',
					receiveType: '',
					receiveTypeLabel: '',
					show: false

				},
				createitem: [{
					title: '',
					goods: '',
					count: Number,
					chance: '',
					type: '',
					prizeType: '',
					prizeTypeLabel: '',
					money: "",
					prizecounpTypeLabel: '',
					receiveType: '',
					receiveTypeLabel: '',
					relateId: '',
					endTime: '',
					show: false,
					matchType: 0,

				}],
				rangereceive: [{
						value: 1,
						text: '物流'
					},
					{
						value: 2,
						text: '自提'
					}
				],
				range: [{
						value: 1,
						text: '实物'
					},

					{
						value: 2,
						text: '优惠券'
					},

					{
						value: 3,
						text: '积分'
					},

					{
						value: 4,
						text: '红包'
					}
				]
			}
		},
		onLoad(data) {
			this.id = data.id
			this.getdetail()
		},
		onReady() {
			// 微信小程序需要用此写法
			//this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		onShow() {
			this.getcoupon()
		},
		methods: {
			switchChange(e){
				
				this.new_detail.autoOpen=e.detail.value
			},
			getprizeType(e) {
				return e == 1 ? '实物' : e == 2 ? '优惠券' : e == 3 ? '积分' : '红包'
			},
			getreceiveType(e) {
				return e == 1 ? '物流' : '自提'
			},
			getdetail() {
				drawInfoStore(this.id).then(res => {
					 res.data.prizes.forEach(item => {
						item.show = false;
					});
					this.new_detail = res.data
					
					this.active = this.new_detail.type - 1
					console.log(this.new_detail.prizes)
				})
			},
			// 时间转换
			gettime() {
				let date = new Date();

				let year = date.getFullYear();
				let month = this.pad(date.getMonth() + 1); // getMonth() is zero-based
				let day = this.pad(date.getDate());

				let hours = this.pad(date.getHours());
				let minutes = this.pad(date.getMinutes());
				let seconds = this.pad(date.getSeconds());

				let formattedDate = year + '/' + month + '/' + day + ' ' + hours + ':' + minutes + ':' + seconds;
				return formattedDate

			},
			pad(number) {
				if (number < 10) {
					return '0' + number;
				}
				return number;
			},

			onShowDatePicker(type) { //显示
				this.type = type;
				this.showPicker = true;
				this.value1 = this.gettime();
				console.log(this.value)
			},
			ed(e) { //选择
				this.showPicker = false;
				if (e) {


					//选择的值date.replace(/\//g, '-')
					this.value = e.value
					this.new_detail.openTime = e.value.replace(/\//g, '-')

					console.log('value => ' + e.value);
					//原始的Date对象
					console.log('date => ' + e.date);
				}
			},



			closeendtime(index) {
				this.new_detail.prizes[index].show = false
			},
			showendtime(index) {
				this.type = 'datetime';
				this.new_detail.prizes[index].show = true
				this.$forceUpdate()
			},
			//选择兑换方式
			bindPickerChangefs(e, index) {
				this.new_detail.prizes[index].receiveTypeLabel = this.rangereceive[e.detail.value].text
				this.new_detail.prizes[index].receiveType = this.rangereceive[e.detail.value].value

			},
			//选择优惠券
			bindPickerChange1(e, index) {

				this.new_detail.prizes[index].prizecounpType = this.rangecounp[e.detail.value].name
				this.new_detail.prizes[index].relateId = this.rangecounp[e.detail.value].id
				this.new_detail.prizes[index].title = this.createitem[index].prizecounpType
			},
			getcouptype(e) {
				let coupon = this.rangecounp.find(item => item.id === e);
				return coupon.name

			},

			getcoupon() {
				let data = {
					// page:1,
					// limit:100,
					// name:""
					status: 1
				}
				couponlist(data).then(res => {
					this.rangecounp = res.data.list
				})
			},
			confirmnew(e, index) {
				
			
					this.new_detail.prizes[index].endTime = e.value.replace(/\//g, '-')
			

				this.new_detail.prizes[index].show = false

			},
			confirmscnew(e) {
				console.log(e)
				this.new_detail.openMinutes = parseInt(this.columns[e.detail.value])

			},
			tj: Debounce((data) => {
				console.log(data)

				drawUpdate(data).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: '提交成功'
					})
					uni.navigateBack({
						delta:1
					})

				}).catch(error => {
					uni.showToast({
						title: error,
						icon: 'none'
					})
				});
			}, 800),
			sub_draw() {

				if (this.new_detail.title == '') {
					uni.showToast({
						title: '请填写抽奖名称',
						icon: 'none'
					})
					return false
				} else if (this.new_detail.maxPeople == '') {
					uni.showToast({
						title: '请填写最多参与多少人',
						icon: 'none'
					})
					return false
				} else if (this.new_detail.minPeople == '') {
					uni.showToast({
						title: '请填写最少参与多少人',
						icon: 'none'
					})
					return false
				} else if (this.new_detail.openTime == '') {
					uni.showToast({
						title: '请填写开奖时间',

						icon: 'none'
					})
					return false
				} else if (this.new_detail.openMinutes == '') {
					uni.showToast({
						title: '请选择开奖时长',
						icon: 'none'
					})
					return false
				} else if (this.new_detail.description == '') {
					uni.showToast({
						title: '请填写抽奖说明',
						icon: 'none'
					})
					return false
				}




				let data = this.new_detail

				if (this.active == 0) {
					let new_createitem = [...this.new_detail.prizes]
					new_createitem.map((item, index) => {
						if (new_createitem.length > 1) {
							if (item.prizeType == '') {
								new_createitem.splice(index, 1)
							}
						} else {
							if (item.prizeType == '') {
								uni.showToast({
									title: '至少一个奖品',
									icon: 'none'
								})
							}
						}

					})
					//如果小于8个添加8-length个奖项为积分
					if (new_createitem.length < 8) {
						let num = 8 - new_createitem.length
						for (let i = 0; i < num; i++) {
							let random = (Math.floor(Math.random() * 100) + 1)
							this.addpoint = {}
							this.addpoint = {
									title: random + '积分',
									integral: random,
									prizeType: 3,
									prizeTypeLabel: '积分',
									matchType: 0,
									count: this.prize.maxpeople

								},


								new_createitem.push(this.addpoint)
						}
					}
					console.log(new_createitem)
					//普通抽奖
					data.type = 1
					data.prizes = new_createitem
					uni.showLoading({
						title: '创建中...'
					})

				} else {
					if (data.money == '') {
						uni.showToast({
							title: '请输入金额',
							icon: 'none'
						})
						return false
					}
					data.type = 2
					data.money = this.new_detail.money
					data.prizes = [{
						count: this.new_detail.maxPeople,
						money: this.new_detail.money,
						matchType: 0,
						prizeType: 4
					}]
				}


				this.tj(data)




			},
			sub_draw2() {
				this.tj(this.jia)
			},
			sele() {
				this.type = 'datetime';
				this.showPicker = true;
				if (this.value == '') {

					this.value = this.gettime();
				}
			},
			bindPickerChange(e, index) {

				this.createitem[index].prizeType = this.range[e.detail.value].value
				this.createitem[index].prizeTypeLabel = this.range[e.detail.value].text
				if (this.createitem[index].prizeType == 2) {
					this.createitem[index].money = ''

					if (this.rangecounp.length == 0) {
						uni.showModal({
							title: '提示',
							content: '请联系平台专员添加优惠券，谢谢~',
							success: (res) => {

								this.createitem[index].prizeType = ''

							}
						})
					}

				} else if (this.createitem[index].prizeType == 3) {
					this.createitem[index].money = ''
					let random = (Math.floor(Math.random() * 100) + 1)
					this.createitem[index].name = random + '积分'
					this.createitem[index].integral = random

				}

				console.log(e)
			},
			tabtop(i) {
				this.active = i
			},
			del(i) {
				this.new_detail.prizes.splice(i, 1)
			},

			confirm(e) {
				// console.log(e)
				// const timeFormat = $u.timeFormat
				// let g_time=this.sele_time
				console.log(e)
				this.new_detail.openTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
				console.log(this.new_detail.openTime)
				//this.result(e.value,e.mode)
				this.show = false
			},
			cancel(e) {
				this.show = false
			},

			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			addluck() {

				this.new_detail.prizes.push({
					...this.additem
				})
			},
			exchange() {
				uni.navigateTo({
					url: '/pages/choujiang/exchange'
				})
			}
		}
	}
</script>

<style lang="scss">
	.arrow {
		width: 28rpx;
	}

	textarea {
		width: 100%;
		border: 1rpx solid #ebebeb;
		height: 150rpx;
		padding: 20rpx;
	}

	button {
		border-radius: 8rpx !important;
	}

	.conter {
		display: inline-block;
		padding-bottom: calc(150rpx + env(safe-area-inset-bottom));

		width: 100%;

		// padding-bottom: constant(safe-area-inset-bottom);
		// padding-bottom: env(safe-area-inset-bottom);
	}

	.fixedbtn {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		border-top: 1rpx solid #D9D9D9;
		background-color: #fff;
		z-index: 999;
		// padding-bottom: constant(safe-area-inset-bottom);
		// 	padding-bottom: env(safe-area-inset-bottom);
		padding-bottom: 20rpx;
		padding-bottom: var(--safe-area-inset-bottom);

		.btn {
			margin-top: 20rpx;
			width: 90%;
			margin-left: 5%;
			height: 90rpx;
			border-radius: 200px;

			text-align: center;
			display: flex;

			justify-content: center;
			align-items: center;

		}

	}

	.but {
		padding: 20rpx;
		margin: 20rpx auto;
		margin-bottom: 140rpx;
		display: flex;
		width: 710rpx;
		padding: 20rpx 10rpx;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		border: 1px solid #DF4B43;
		color: #DF4B43;
		font-size: 28rpx;
		background: #FFF;
	}

	.input {
		text-align: right;
	}

	.pt {
		width: 100%;
		padding: 20rpx;
		background-color: #fff;

		.item {
			padding: 20rpx;
		}
	}

	.tab {
		width: 100%;
		position: fixed;
		top: 0;
		background: #fff;
		border-bottom: 1rpx solid #ebebeb;
		z-index: 999;

		.tab-item {
			width: 50%;
			text-align: center;
			line-height: 100rpx;

		}

		.active {
			color: #DF4B43;
		}
	}

	.pt {

		.item {
			border-bottom: 1rpx solid #fff;
		}

		.item:last-child {
			border: none
		}
	}

	.ptone {
		margin-top: 120rpx;
	}

	.set {
		padding-right: 30rpx;
		position: relative;

		.del {
			position: absolute;
			right: 0;
			top: 0
		}

		.item:last-child {
			border: none;
		}
	}

	page,
	body {
		background-color: #f5f5f5;
	}
</style>